---
{
	"title": "Notes de bas de page",
	"language": "fr",
	"category": "Plugiciels",
	"categoryfile": "plugins",
	"description": "Une méthode cohérente et facile d’accès pour répertorier les notes de bas de page.",
	"altLangPrefix": "footnotes",
	"dateModified": "2016-06-10"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>But</h2>
	<p>Ce plugiciel permet aux développeurs d’intégrer facilement des notes de bas de page dans leurs pages Web et facilite la conformité à WCAG 2.0 lors de l’intégration de ces notes de bas de page.</p>
</section>

<div lang="en">
<section>
	<p><strong>Needs translation</strong></p>
	<h2>Use when</h2>
	<ul>
		<li>The end of a page's content contains a footnotes section.</li>
	</ul>
</section>

<section>
	<p><strong>Needs translation</strong></p>
	<h2>Do not use when</h2>
	<ul>
		<li>A page's content contains multiple footnotes sections (e.g. table notes... scenarios where table-specific footnotes directly follow every table).</li>
		<li>A page is entirely dedicated to footnotes</li>
	</ul>
</section>
</div>

<section>
	<h2>Exemples</h2>
	<ul>
		<li><a href="../../../demos/footnotes/footnotes-en.html">Exemples anglais</a></li>
		<li><a href="../../../demos/footnotes/footnotes-fr.html">Exemples français</a></li>
	</ul>
	<div lang="en">
		<h2>Evaluation and report</h2>
		<ul>
			<li>Accessibility pre-assessment #1
				<ul>
					<li><a href="../../../demos/footnotes/reports/a11y-1-en.html" hreflang="en"><span class="wb-inv">Pre-assessment #1</span> English report</a></li>
					<li><a href="../../../demos/footnotes/reports/a11y-1-fr.html" hreflang="fr"><span class="wb-inv">Pre-assessment #1</span> French report</a></li>
				</ul>
			</li>
			<li>Accessibility assessment #1
				<ul>
					<li><a href="../../../demos/footnotes/reports/a11y-2-en.html" hreflang="en"><span class="wb-inv">Assessment #1</span> English report</a></li>
					<li><a href="../../../demos/footnotes/reports/a11y-2-fr.html" hreflang="fr"><span class="wb-inv">Assessment #1</span> French report</a></li>
				</ul>
			</li>
		</ul>
	</div>
</section>

<section>
	<div lang="en">
	<h2>How to implement</h2>
	<section>
		<p><strong>Needs translation</strong></p>
		<h3>Footnote Indicators</h3>
		<p>Footnotes are generally denoted by numbers, but may also be represented by other kinds of indicators, such as single letters or symbols.</p>
		<p>The numbers used throughout this documentation's footnote examples (including numbers within IDs) can be safely substituted with alternate kinds of indicators.</p>
	</section>
	</div>

	<section>
		<h3>Lien vers les notes de bas de page</h3>
		<p>Cette section montre comment rechercher le lien vers les notes de bas de page.</p>
	</section>

	<section>
		<h4>Lien vers la section des notes de bas de page</h4>
		<p>Utiliser le code suivant pour rechercher le lien vers la section des notes de bas de page.</p>
		<pre><code>&lt;a href="#fn"&gt;Notes de bas de page&lt;/a&gt;</code></pre>
	</section>

	<section>
		<h4>Lien vers une note de bas de page</h4>
		<p>Utiliser le code suivant pour rechercher le lien vers une note de bas de page particulière.</p>
		<pre><code>&lt;sup id="fn1-rf"&gt;&lt;a class="fn-lnk" href="#fn1"&gt;&lt;span class="wb-inv"&gt;Note de bas de page &lt;/span&gt;1&lt;/a&gt;&lt;/sup&gt;</code></pre>

		<p><strong>Remarque&#160;:</strong> Les attributs ID des liens vers une note de bas de page multiréférentielle devraient contenir un trait d'union et un numéro placée juste après l’indicateur (par exemple&#160;: <code>id="fn2-1-rf"</code>, <code>id="fn2-2-rf"</code>, <code>id="fn2-3-rf"</code>, etc.) afin de pouvoir faire, à l’aide d’un programme, la distinction entre les liens de référence.</p>
	</section>

	<div lang="en">
	<section>
		<p><strong>Needs translation</strong></p>
		<h4>Link to Multiple Footnotes</h4>
		<p>Use the following code as a basis to consecutively link to multiple footnotes.</p>
		<pre><code>&lt;sup id="fn2-rf"&gt;&lt;a class="fn-lnk" href="#fn2"&gt;&lt;span class="wb-inv"&gt;Note de bas de page &lt;/span&gt;2&lt;/a&gt;&lt;/sup&gt;&#160;&lt;sup id="fn3-rf"&gt;&lt;a class="fn-lnk" href="#fn3"&gt;&lt;span class="wb-inv"&gt;Note de bas de page &lt;/span&gt;3&lt;/a&gt;&lt;/sup&gt;</code></pre>

		<p><strong>Note:</strong> Non-breaking spaces (i.e. <code>&amp;#160;</code>) should be used to separate each link.</p>
	</section>
	</div>

	<section>
		<h3>Section des notes de bas de page</h3>
		<p>Cette section explique comment créer une section réservée aux notes de bas de page.</p>
		<p>Utiliser le code suivant pour créer la section:</p>
		<pre><code>&lt;aside class="wb-fnote" role="note"&gt;
	&lt;h2 id="fn"&gt;Notes de bas de page&lt;/h2&gt;
	&lt;dl&gt;
		&lt;!--INSÉRER LES NOTES DE BAS DE PAGE ICI--&gt;
	&lt;/dl&gt;
&lt;/aside&gt;</code></pre>
	</section>

	<section>
		<h3>Types de notes de bas de page</h3>
		<p>Cette section explique comment créer différents types de notes de bas de page censées être intégrées dans la section.</p>

		<section>
			<h4>Notes de bas de page normales</h4>
			<p>Il s’agit d’une note de bas de page mentionnée qu’une seule fois dans une page donnée.</p>
			<p>Utiliser le code suivant pour créer une note de bas de page normale&#160;:</p>
			<pre><code>&lt;dt&gt;Note de bas de page 1&lt;/dt&gt;
&lt;dd id="fn1"&gt;
	&lt;p&gt;Exemple de note de bas de page standard.&lt;/p&gt;
	&lt;p class="fn-rtn"&gt;&lt;a href="#fn1-rf"&gt;&lt;span class="wb-inv"&gt;Retour à la référence de la note de bas de page &lt;/span&gt;1&lt;/a&gt;&lt;/p&gt;
&lt;/dd&gt;</code></pre>
		</section>

		<section>
			<h4>Note de bas de page multiréférentielle</h4>
			<p>Il s’agit d’une note de bas de page mentionnée deux fois ou plus dans une page donnée. Par défaut, son lien retour devrait indiquer (et identifier explicitement) le premier renvoi à la note de bas de page. Si la prise en charge de JavaScript est disponible, un plugiciel d’appui supprimera automatiquement l’identificateur explicite dans le texte du lien retour, en plus de gérer la destination du lien retour lorsque l’accès à la note de bas de page se fait par une référence différente à partir du contenu.</p>
			<p>Utiliser le code suivant pour créer une note de bas de page qui peut être mentionnée par plusieurs éléments du contenu:</p>
			<pre><code>&lt;dt&gt;Note de bas de page 2&lt;/dt&gt;
&lt;dd id="fn2"&gt;
	&lt;p&gt;Exemple de note de bas de page qui comporte de nombreux liens.&lt;/p&gt;
	&lt;p class="fn-rtn"&gt;&lt;a href="#fn2-1-rf"&gt;&lt;span class="wb-inv"&gt;Retour à la &lt;span&gt;première&lt;/span&gt; référence de la note de bas de page &lt;/span&gt;2&lt;/a&gt;&lt;/p&gt;
&lt;/dd&gt;</code></pre>

			<p><strong>Remarque&#160;:</strong> Les attributs <code>href</code> des liens retour dans des notes de bas de page multiréférentielles devraient toujours contenir «&#160;-1&#160;» après l’indicateur de la note de bas de page (p. ex. <code>href="#fn2-1-rf"</code>).</p>
			<p><strong>Remarque 2&#160;:</strong> Le texte du lien retour de notes de bas de page multiréférentielles devrait toujours contenir <code>&lt;span&gt;première&lt;/span&gt;</code>, pour désigner spécifiquement leurs destinations par défaut quand il n’y a pas de prise en charge de JavaScript.</p>
		</section>

		<section>
			<h4>Note de bas de page de plusieurs paragraphes</h4>
			<p>Les notes de bas de page contenant deux ou plusieurs paragraphes sont prises en charge. Elles peuvent se présenter sous forme de notes de bas de page normale ou multiréférentielle.</p>
			<p>Utiliser le code suivant pour créer une note de bas de page contenant plusieurs paragraphes&#160;:</p>
			<pre><code>&lt;dt&gt;Note de bas de page 3&lt;/dt&gt;
&lt;dd id="fn3"&gt;
	&lt;p&gt;Exemple de note de bas de page qui compte plusieurs paragraphes (premier paragraphe).&lt;/p&gt;
	&lt;p&gt;Exemple de note de bas de page qui compte plusieurs paragraphes (deuxième paragraphe).&lt;/p&gt;
	&lt;p&gt;Exemple de note de bas de page qui compte plusieurs paragraphes (troisième paragraphe).&lt;/p&gt;
	&lt;p class="fn-rtn"&gt;&lt;a href="#fn3-rf"&gt;&lt;span class="wb-inv"&gt;Retour à la référence de la note de bas de page &lt;/span&gt;3&lt;/a&gt;&lt;/p&gt;
&lt;/dd&gt;</code></pre>
		</section>
	</section>

	<section>
		<h3>Contrôle de la qualité des références de note de bas de page</h3>
		<p>Une solution de contournement a été implémenté afin que les items dans la section de note de bas de page référé à la première instance de la note dans le contenu de la page courante. Il est une bonne pratique que le balisage à la source pointe vers la première référence. Lorsque cela n'est pas le cas, le plugiciel va émettre un avertissement dans la console du fureteur et affichera une message tel que: <code lang="en">wb-fnote - Relink first reference of #myfoootnote for #fn4-1-rf</code></p>
	</section>
</section>

<div lang="en">
<section>
	<p><strong>Needs translation</strong></p>
	<h2>Events</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-fnote</code></td>
				<td>Triggered manually (e.g., <code>$( ".wb-fnote" ).trigger( "wb-init.wb-fnote" );</code>).</td>
				<td>Used to manually initialize the Footnotes plugin. <strong>Note:</strong> The Footnotes plugin will be initialized automatically unless the required markup is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-fnote</code> (v4.0.5+)</td>
				<td>Triggered automatically after the Footnotes plugin initializes.</td>
				<td>Used to identify where the Footnotes plugin was initialized (target of the event).
					<pre><code>$( document ).on( "wb-ready.wb-fnote", ".wb-fnote", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-fnote" ).on( "wb-ready.wb-fnote", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/footnotes">Footnotes plugin source code on GitHub</a></p>
</section>
</div>
